<template>
	<div class="table">
		<el-table
			border
			stripe
			ref="singleTable"
			:default-sort="tableData.sort ? tableData.sort : false"
			:data="tableData.tableConent"
			highlight-current-row
			@select="changeSelect"
			@cell-click="tableCellClick"
			@row-click="rowClick"
			style="width: 100%"
			:row-key="getRowKey"
			:header-cell-style="{ height: '48px' }"
			:row-style="{ height: '48px' }"
			:cell-style="{ padding: '0' }"
		>
			<!-- 业务记录ID | 业务流水ID | 业务场景 | 最近受理时间 | 访客ID | 坐席ID | 坐席姓名 | 业务状态 | 最新会话 | 历史会话 | 操作 -->
			<el-table-column height="48" align="center" :property="tableData.tableHead[0].prop" :label="tableData.tableHead[0].label" :min-width="tableData.tableHead[0].width"> </el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[1].prop" :label="tableData.tableHead[1].label" :min-width="tableData.tableHead[1].width"> </el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[2].prop" :label="tableData.tableHead[2].label" :min-width="tableData.tableHead[2].width"> </el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[3].prop" :label="tableData.tableHead[3].label" :min-width="tableData.tableHead[3].width"> </el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[4].prop" :label="tableData.tableHead[4].label" :min-width="tableData.tableHead[4].width"> </el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[5].prop" :label="tableData.tableHead[5].label" :min-width="tableData.tableHead[5].width"> </el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[6].prop" :label="tableData.tableHead[6].label" :min-width="tableData.tableHead[6].width"> </el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[7].prop" :label="tableData.tableHead[7].label" :min-width="tableData.tableHead[7].width">
				<template slot-scope="scope">
					<p :class="getStatusClass(scope.row.status)">{{ scope.row.status }}</p>
				</template>
			</el-table-column>
			<el-table-column height="48" align="center" :property="tableData.tableHead[8].prop" :label="tableData.tableHead[8].label" :min-width="tableData.tableHead[8].width">
				<template slot-scope="scope">
					<a class="link" v-html="scope.row.sessionId" @click="showDetail(scope.row.sessionId)" />
				</template>
			</el-table-column>
			<slot name="view"></slot>
			<slot name="btn"></slot>
		</el-table>
	</div>
</template>

<script>
import { bizStatusIndex } from './definition';
export default {
	props: {
		tableData: {
			type: Object,
			defualt: () => {}
		},
		tableSelections: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			currentSelected: [],
			radioId: ''
		};
	},
	computed: {},

	mounted() {
		console.warn('tableData : ', this.tableData);
	},
	methods: {
		getStatusClass(status) {
			return 'status-' + bizStatusIndex[status];
		},
		rowClick(row) {
			this.radioId = row.variableName;
			this.$emit('rowClick', this.radioId);
		},
		getRowKey(row) {
			return row.id;
		},
		changeSelect(selection, row) {
			// 多选
			if (this.tableData.checkedGroup) {
				this.currentSelected = selection;
				this.$emit('changeSelect', this.currentSelected, row);
			} else {
				// 单选
				const selectTable = this.$refs.singleTable;
				selectTable.clearSelection();
				if (selection.includes(row)) {
					this.$nextTick(() => {
						selectTable.toggleRowSelection(row, true);
						this.currentRow = row;
						this.$emit('changeSelect', row);
					});
				} else {
					this.$emit('changeSelect', '');
				}
				this.currentRow = '';
			}
		},
		currentChange(currentRow) {
			console.log(currentRow);
			if (this.tableData.checkedGroup) {
				this.$refs.singleTable.toggleRowSelection(currentRow);
				this.$emit('currentChange', currentRow);
			} else {
				this.$refs.singleTable.clearSelection();
				this.$refs.singleTable.toggleRowSelection(currentRow);
				this.$emit('currentChange', currentRow);
			}
		},
		tableCellClick(row, cell) {
			this.$emit('tableCellClick', row, cell);
		},
		showDetail(sessionId) {
			// 新开页跳转至对应session的会话详情页
			let routerdata = this.$router.resolve({
				name: 'session'
			});
			let newhref = routerdata.href + '?sessionId=' + sessionId + '&uid=' + window.uid;
			window.open(newhref, '_blank');
		}
	}
};
</script>

<style lang="less">
.table {
	.el-table {
		width: 100%;
		overflow: auto;
	}
	.el-table thead {
		tr {
			background-color: #eee;
		}
		.el-table-column--selection .cell {
			display: none !important;
		}
	}
	.el-table__fixed-right {
		height: 100% !important;
		bottom: 1px;
	}
	.el-table .cell {
		font-size: 14px;
	}
	.status-0 {
		color: #676a6c; // 进行中
	}
	.status-1 {
		color: #676a6c; // 待质检
	}
	.status-2 {
		color: #676a6c; // 未完成
	}
	.status-3 {
		color: #ef5753; // 待补录
	}
	.status-4 {
		color: #21db63; // 质检通过
	}
	.status-5 {
		color: #676a6c; // 补录中
	}
}
</style>

<style lang="less" scoped>
.table {
	background-color: transparent;
}
</style>
